<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>canvas文本格式屏幕录制</title>
    <style>
      .container {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
      }
      .paint-area {
        flex: 0 1 45%;
        padding-right: 2%;
        border-right: 1px solid #eee;
      }
      .video-area {
        flex: 0 1 45%;
      }
      .canvas-box {
        border: 1px solid #eee;
        margin: 0 auto;
        display: block;
        position: relative;
      }
      .canvas-area {
        position: relative;
        width: 800px;
        height: 400px;
      }
      .canvas-area canvas {
        position: absolute;
        z-index: 1;
      }
      .canvas-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        pointer-events: none;
      }
      .time {
        width: 100%;
        height: 20px;
        text-align: center;
        background-color: rgba(144, 144, 144, 0.1);
      }
      video {
        border: 1px solid #eee;
        display: none;
      }
      textarea{
        display: block;
      }
      .margin {
        margin: 10px 0;
      }
    </style>
</head>
<body>
  <div class='container'>
    <div class="paint-area">
      <p>画板区</p>
      <div class="canvas-box">
        <div class="time" id="time"></div>
        <div class="canvas-area">
          <canvas id='canvas-record'></canvas>
          <div class="canvas-image" id="canvas-image"></div>
        </div>
      </div>
      <div class="margin">
        <button onclick='startRecord()'>开始录制</button>
        <button onclick='pauseRecord()'>暂停录制</button>
        <button onclick='resumeRecord()'>继续录制</button>
        <button onclick='stopRecord()'>结束录制</button>
        <button onclick='exportData()'>输出数据到textarea里</button>
      </div>
      <div class="margin">
        <button id="insertImage" onclick="insertImage()">插入背景图片</button>
        <p>输出数据：</p>
        <textarea id="canvas-code" cols="100" rows="6" class="margin"></textarea>
      </div>
    </div>
    
    <div class="video-area">
      <p>视频区</p>
      <video id='video-record' playsInline autoPlay>
      </video>
      <div>
        <p>输入数据：</p>
        <textarea id="video-code" cols="100" rows="6" class="margin"></textarea>
        <button id="startPlay" onclick='startPlay()'>播放视频</button>
        <button id="exportVideo" onclick='exportVideo()'>导出视频</button>
      </div>
    </div>
    
  </div>
  
  <script type="module">
    import {
      LvePaint,
      LvePlay
    } from './index.js'
    // <!-- 编辑器画板 -->
    const canvasId = document.querySelector('#canvas-record')
    const timeId = document.querySelector('#time')
    const lvePaint = new LvePaint({
      canvasId,
      timeId,
      canvasConfig: {
        width: 800,
        height: 400
      }
    })
    /**
     * 开始录制
     **/
    window.startRecord = () => {
      lvePaint.startRecord()
    }
    /**
     * 暂停录制
     **/
    window.pauseRecord = () => {
      lvePaint.pauseRecord()
    }
    /**
     * 继续录制
     **/
    window.resumeRecord = () => {
      lvePaint.resumeRecord()
    }
    /**
     * 结束录制
     **/
    window.stopRecord = () => {
      lvePaint.stopRecord()
    };
    /**
     * 输出数据到textarea里
     **/
    window.exportData = () => {
      document.querySelector('#canvas-code').value = JSON.stringify(lvePaint.getData())
    }
    /**
     * 插入背景图片
     **/
    window.insertImage = () => {
      lvePaint.insertImage()
    }
    // <!-- 播放器视频 -->
    const videoId = document.querySelector('#video-record')
    const lvePlay = new LvePlay({
      videoId,
      videoConfig: {
        width: 800,
        height: 400
      }
    })
    /**
     * 播放视频
     **/
    window.startPlay = () => {
      const data = document.querySelector('#video-code').value
      const ready = lvePlay.setData(data)
      if (ready) {
        lvePlay.startPlay()
      }
    }
    /**
     * 导出视频
     **/
    window.exportVideo = () => {
      lvePlay.exportVideo()
    }
  </script>
</body>
</html>
